let mask = null
function stop (e) {
    e.preventDefault()
    e.stopPropagation()
}
function createLoading () {
    if(mask) return
    mask = document.createElement('div')
    mask.setAttribute('class', 'common-loading-mask')
    let img = document.createElement('div')
    // let img = new Image()
    // gif 加载从收帧开始
    // img.src = require('../assets/images/common/loading.gif') + `?=time=${+ new Date()}`
    img.className = 'v-common-loading'
    img.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
                <rect x="0" y="7.6416" width="4" height="14.7168" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                </rect>
                <rect x="8" y="5.1416" width="4" height="19.7168" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                </rect>
                <rect x="16" y="7.3584" width="4" height="15.2832" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                </rect>
            </svg>`
    mask.appendChild(img)
    document.body.appendChild(mask)
    document.body.style.overflow='hidden';       
    document.addEventListener("touchmove", stop, {passive:false});//禁止页面滑动
}
function removeLoading () {
    if (mask) {
        document.body.style.overflow='';//出现滚动条
        document.removeEventListener("touchmove", stop, {passive:false});
        document.body.removeChild(mask)
        mask = null
    }
}
export default {
    // eslint-disable-next-line no-unused-vars
    bind (el, binding, vnode) {
        if(binding.value) {
            createLoading()
        }
    },
    //数据更新的时候绑定
    // eslint-disable-next-line no-unused-vars
    update (el,binding,vnode) {
        console.log('update')
        // let ctx = vnode.context;
        if(binding.value) {
            createLoading()
        } else {
            removeLoading()
        }
    },
    // eslint-disable-next-line no-unused-vars
    unbind (el,binding,vnode) {
        console.log('unbind')
        if(binding.value) {
            removeLoading()
        }
    }
}